const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
// entry 入口文件,告诉资源从哪里开始  默认./src/index.js
// output 出口文件,打包好的文件资源输出到哪里    默认./dist/main.js
// loader webpack 只能识别js/json 处理其他类型的文件，就需要使用 loader 进行转换。 翻译官
// loader 执行的顺序,从右到左,从下到上
// plugins 插件,执行更广泛的任务,打包,优化,压缩,并不直接操作单个文件，它直接对整个构建过程其作用
// mode  模式 development 开发, production 生产模型,压缩,优化,兼容

// output 是一个对象 
// filename 指定解析的文件的名字,默认是main.js
module.exports = {
  entry: "./src/myindex.js",
  output: {
    filename: 'bundle.js',
    // 指定生成文件路径
    path: path.resolve(__dirname, 'chunk'),
    clean: true, // 在生成文件之前清空 output 目录
  },
  module: {
    // ,不同的文件需要 配合不同的loader配合使用
    rules: [
      // 正则表达式, 使用的加载器,翻译官
      {
        test: /\.css$/,
        use: [
          // 创建style 然后放到html中head 中
          'style-loader',
          // 将css 文件 当做模块加载到js 中,这时候还是字符串
          'css-loader'
        ]
      },
      {
        test: /\.(jpg|png|jpeg)$/,
        loader: 'url-loader',
        options: {
          // 8kb一下
          limit: 8 * 1024,
          esModule: false,
          name: '[name].[hash:3].[ext]'
        },
        type: 'javascript/auto'
      },

      {
        test: /\.(htm|html)$/,
        loader: 'html-withimg-loader'
      }
    ],
  },
  plugins: [
    // title   生成的html文档的标题。配置该项，<title><%= htmlWebpackPlugin.options.title %></title>
    // template 本地模板文件的位置
    // hash   true|false， html <script type="text/javascript" src="common.js?a3e1396b501cdd9041be"></script>
    new HtmlWebpackPlugin({
      template: './index.html',
    })
  ],

  mode: 'development'
  // mode:'production'
};